<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Using Sprite</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;

	var imgSeq = new Image();       // The image for the sparkle animation
	var sprite;                     // The animated sparkle template to clone
	var fpsLabel;
	var fader;                      // Semi fades the Background to give a tracing effect
	var spkls;                      // Container for all the sparkles

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		stage.autoClear = false;

		// attach mouse handlers directly to the source canvas.
		// better than calling from canvas tag for cross browser compatibility:
		stage.addEventListener("stagemousemove", moveCanvas);
		stage.addEventListener("stagemousedown", clickCanvas);

		// define simple sprite sheet data specifying the image(s) to use, the size of the frames,
		// and the registration point of the frame
		// it will auto-calculate the number of frames from the image dimensions and loop them
		var data = {
			images: ["../_assets/art/spritesheet_sparkle.png"],
			frames: {
				width: 21,
				height: 23,
				regX: 10,
				regY: 11
			}
		};

		// set up an animation instance, which we will clone
		sprite = new createjs.Sprite(new createjs.SpriteSheet(data));

		// setup slow fadeout
		fader = new createjs.Shape();
		stage.addChild(fader);
		var gfx = fader.graphics;
		gfx.beginFill("rgba(0,0,0, 0.3)").drawRect(0,0, 1024, 704).endFill();
		fader.cache(0,0, 1024,1024, 1/32); // Power of two textures smooth better, but we don't need full resolution either

		spkls = new createjs.Container();
		stage.addChild(spkls);

		// add a text object to output the current FPS:
		fpsLabel = new createjs.Text("------ @ -- fps", "bold 14px Arial", "#FFF");
		stage.addChild(fpsLabel);
		fpsLabel.x = 10;
		fpsLabel.y = 20;

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// loop through all of the active sparkles on stage:
		var l = spkls.numChildren;
		var m = event.delta / 16;
		for (var i = 0; i < l; i++) {
			var sparkle = spkls.getChildAt(i);

			if(--sparkle.life <= 0) {
				spkls.removeChild(sparkle);
				i--; l--;
				continue;
			}

			// apply gravity and friction
			sparkle.vY += 0.1 * m;

			// update position, scale, and alpha:
			sparkle.x += sparkle.vX * m;
			sparkle.y += sparkle.vY * m;

			sparkle.alpha = sparkle.alphaStart * (sparkle.life / sparkle.lifeMax);

			// remove sparkles that are off screen or not invisible
			if (sparkle.y > canvas.height) {
				sparkle.vY *= -(Math.random() * 0.1 + 0.8);
				sparkle.vX += Math.cos( Math.random() * Math.PI * 2) * 3;
			} else if (sparkle.y < 0) {
				sparkle.vY *= 0.9;
			}

			if (sparkle.x > canvas.width || sparkle.x < 0) {
				sparkle.vX *= -1;
			}
		}

		fpsLabel.text = l + " @ " + Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";

		// draw the updates to stage
		stage.update(event);
	}

	// sparkle explosion
	function clickCanvas(evt) {
		addSparkles(Math.random() * 200 + 100 | 0, stage.mouseX, stage.mouseY, 1);
	}

	// sparkle trail
	function moveCanvas(evt) {
		addSparkles((Math.random() * 4 + 2) | 0, stage.mouseX, stage.mouseY, 0.1);
	}

	function addSparkles(count, x, y, speed) {
		// create the specified number of sparkles
		for (var i = 0; i < count; i++) {
			// clone the original sparkle, so we don't need to set shared properties:
			var sparkle = sprite.clone();

			// set display properties:
			sparkle.x = x;
			sparkle.y = y;
			sparkle.rotation = Math.random()*360;
			sparkle.alpha = sparkle.alphaStart = Math.random() * 0.7 + 0.6;
			sparkle.scale = Math.random() + 0.3;

			sparkle.life = sparkle.lifeMax = Math.random() * 100 + 50;

			// set up velocities:
			var a = Math.PI * 2 * Math.random();
			var v = (Math.random() - 0.5) * 30 * speed;
			sparkle.vX = Math.cos(a) * v;
			sparkle.vY = Math.sin(a) * v;

			// start the animation on a random frame:
			sparkle.gotoAndPlay(Math.random() * sparkle.spriteSheet.getNumFrames() | 0);

			// add to the display list:
			spkls.addChild(sparkle);
		}
	}

</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>Sparkles</h1>

	<p>Example showing how to use simple animated <code>Sprite</code> instances
		with <code>stagemousemove</code> and <code>stagemousedown</code> events.
		Move your mouse and click
		on the canvas. It also demonstrates displaying the current measured
		framerate with <code>Ticker.getMeasuredFramerate()</code>
		and <code>Text</code>. Click repeatedly to generate lots of sparkles and
		slow down the framerate.<br/>
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400" style="background:black"></canvas>
</div>
</body>
</html>
